<template>
  <div class="case-detatil-one">
    <div class="case-title">
      进件信息
    </div>
    <template>
      <el-form size="small" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="进件编号">
              <el-input disabled v-model="basicForm.applyNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品名称">
              <el-input disabled v-model="basicForm.productName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="当前状态" label-width="110px">
              <el-input disabled v-model="basicForm.followStatusStr"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="申请金额">
              <el-input disabled v-model="basicForm.applyAmount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请期数">
              <el-input disabled v-model="basicForm.applyPeriods"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="房产总估值" label-width="110px">
              <el-input disabled v-model="basicForm.houseAssetTotalValue"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="最高可申请">
              <el-input disabled v-model="basicForm.maxCanLoan"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="受理人工号">
              <el-input disabled v-model="basicForm.acceptorNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="受理人姓名">
              <el-input disabled v-model="basicForm.acceptorName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="受理人所属机构" label-width="110px">
              <el-input disabled v-model="basicForm.acceptorOrgName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目编号">
              <el-input disabled v-model="basicForm.projectNo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="批核金额">
              <el-input disabled v-model="basicForm.approveAmount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="批核期数">
              <el-input disabled v-model="basicForm.approvePeriods"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="批核年化利率" label-width="110px">
              <el-input disabled v-model="basicForm.approveIrrRate"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <!-- <config-form :initData="basicForm" :span="6" :options="OTHER_FORM" /> -->
    <template>
      <el-tabs v-model="activeName">
        <el-tab-pane
          v-for="(value, key) in IMAGE_JYDTYPE"
          :key="key"
          :label="value + '(' + jydimageAll[key].length + ')'"
          :name="key"
        >
          <image-preview
            :imageList="jydimageAll[key]"
            :previewList="jydPreviewList[key]"
          ></image-preview>
        </el-tab-pane>
      </el-tabs>
    </template>
    <el-tabs v-model="agreementActive">
      <el-tab-pane
        v-for="(value, key) in contractType"
        :key="key"
        :label="value + '(' + allContract[key].length + ')'"
        :name="key"
      >
        <template v-if="productType == PRODUCTTYPE.JYD">
          <image-preview
            :imageList="allContract[key]"
            :previewList="jydPreviewList[key]"
          ></image-preview>
        </template>
      </el-tab-pane>
    </el-tabs>
    
    <div class="line-details"></div>
    <el-row>
      <el-col :span="24" :offset="22">
        <el-button size="small" plain type="primary" @click="close" >关闭</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  OTHER_FORM,
  PRODUCTTYPE,
  IMAGE_JYDTYPE
} from "../js/contant.js";
import api from "../api";
import { mapState } from "vuex";
import { CONSTANT_OBJ } from "@/utils/constant";

export default {
  components: {},
  props: {
    caseId: {
      type: String,
      default: ""
    },
    followId: {
      type: String,
      default: ""
    },
    productType: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      OTHER_FORM,
      IMAGE_JYDTYPE,
      PRODUCTTYPE,
      // test,
      basicForm: {},
      activeName: "TAX",
      agreementActive: "",
      otherActive: "",
      approvalRecordList: [],
      jydimageAll: {
        MARRIAGE: [],
        GUARANTEE: [],
        RENT: [],
        VISIT: [],
        CLEAN_PRACTICE: [],
        INCOME: [],
        DUE_DILIGENCE: [],
        OTHER: [],
        HOUSE_FUND_TAX_SALARY: []
      },
      jydPreviewList: {
        MARRIAGE: [],
        GUARANTEE: [],
        RENT: [],
        VISIT: [],
        CLEAN_PRACTICE: [],
        INCOME: [],
        DUE_DILIGENCE: [],
        OTHER: [],
        HOUSE_FUND_TAX_SALARY: []
      },
      allContract: {},
      contractType: {},
      dqdcEnter: {},
      dqdcType: {},
    };
  },
  mounted() {
    console.log('>>>>productType: ', this.productType);
    console.log(this.caseId, "案件id");
    this.getBasicData();
    this.getImageListInformation();
  },
  methods: {
    // 获取基本数据
    getBasicData() {
      const params = {
        caseId: this.caseId
      };
      api.queryByCaseId(params).then(res => {
        const { responseCode, data } = res;
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          let bData = { ...data } || {};
          console.log("bData", bData);
          this.getByResearch(bData);
        }
      });
    },

    // 获取申请件跟进详情
    getByResearch(bData) {
      api.queryByFollowIdId(this.followId).then(res => {
        const { responseCode, data } = res;
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          let result = { ...data } || {};
          this.basicForm = Object.assign(bData, result);
          if (this.basicForm) {
            this.$set(this.basicForm, 'followStatusStr', this.getKeyFromValue(this.basicForm.followStatus) || '')
          }
        }
      });
    },
    getKeyFromValue (value) {
      if (this.dicts.mortgage_status.childList) {
        console.log('>>', this.dicts.mortgage_status.childList);
        for (let i = 0; i < this.dicts.mortgage_status.childList.length; i++) {
          let v = this.dicts.mortgage_status.childList[i]
          if (value === v.dictNo) {
            return v.dictName
          }
        }
      }
      return value
    },
    /**
     * @description 通过caseId查询申请件审批记录
     */
    getApprovalRecordData() {
      api.getAuditData(this.caseId).then(res => {
        const { responseCode, data } = res;
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          let result = [...data] || [];
          this.approvalRecordList = result;
        }
      });
    },
    // 获取影像信息
    getImageListInformation() {
      api.getImageInfo(this.caseId).then(res => {
        const { responseCode, data } = res;
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          console.log(data, "影像信息");
          this.disposeImage(data);
          this.disposeContract(data);
        }
      });
    },
    disposeImage(list) {
      let type = Object.prototype.toString.call(list);
      if (type === "[object Object]") return;
      // 吉用贷
      const a = {
        HOUSE_FUND: "公积金",
        TAX: "个税",
        INCOME: "收入证明",
        VISIT_LOGO: '亲访照片',
        VISIT_UNIT: '亲访照片',
        VISIT_DOOR: '亲访照片',
        VISIT_GROUP: '亲访照片',
        VISIT_INSIDE: '亲访照片',
        VISIT_PROPERTY: '亲访照片',
        VISIT_FLOOR: '亲访照片'
      };
      let b = Object.assign({}, a, this.IMAGE_JYDTYPE);
      let keys = Object.keys(b);
      let filterImg = list.filter(ele => keys.includes(ele.imgType));
      filterImg.forEach(v => {
        const obj = {
          HOUSE_FUND: "公积金/个税/收入证明",
          TAX: "公积金/个税/收入证明",
          INCOME: "公积金/个税/收入证明"
        };
        if (obj[v.imgType]) {
          // this.jydPreviewList[v.imgType] = v.urls.map(ele => {
          //   return ele.url;
          // });

          this.jydimageAll["HOUSE_FUND_TAX_SALARY"] = [
            ...this.jydimageAll["HOUSE_FUND_TAX_SALARY"],
            ...v.urls
          ];
          if (v.urls && v.urls.length>0) {
              v.urls.forEach(url => {
                this.jydPreviewList['HOUSE_FUND_TAX_SALARY'].push(url.url)
              });
            }
        } else {
          console.log('>>>>>>>>>>>>>>>>>', v.imgType);
          if (v.imgType == 'VISIT_LOGO' || v.imgType == 'VISIT_UNIT' 
              || v.imgType == 'VISIT_DOOR' || v.imgType == 'VISIT_GROUP' || v.imgType == 'VISIT_INSIDE'
              || v.imgType == 'VISIT_PROPERTY' || v.imgType == 'VISIT_FLOOR' ) {
            // 如果是亲访子类
            console.log('是亲访子类：', v.imgType);
            if (v.urls && v.urls.length>0) {
              v.urls.forEach(url => {
                this.jydimageAll['VISIT'].push(url)
                this.jydPreviewList['VISIT'].push(url.url)
              });
            }
          } else {
            this.jydimageAll[v.imgType] = [...v.urls];
            this.jydPreviewList[v.imgType] = v.urls.map(ele => {
              return ele.url;
            });
          }
        }
      });
      console.log(this.jydimageAll, "吉用贷影像结果");
    },
    close() {
      this.$emit("close", false);
    },
    disposeContract(list) {
      let type = Object.prototype.toString.call(list);
      if (type === "[object Object]") return;
      const reg = /[\u4e00-\u9fa5]/g;
      let filterRes = list.filter(v => v.imgType === "CONTRACT");
      if (filterRes.length === 0) return;
      filterRes[0].urls.forEach(ele => {
        if (ele.fileName.match(reg).join("") !== "贷前调查确认函") {
          this.contractType[
            ele.fileName.match(reg).join("")
          ] = ele.fileName.match(reg).join("");
          this.allContract[ele.fileName.match(reg).join("")] = [];
        }
        if (ele.fileName.match(reg).join("") === "贷前调查确认函") {
          this.dqdcEnter[ele.fileName.match(reg).join("")] = [];
          this.dqdcType[ele.fileName.match(reg).join("")] = ele.fileName
            .match(reg)
            .join("");
        }
      });
      filterRes[0].urls.forEach(ele => {
        if (ele.fileName.match(reg).join("") !== "贷前调查确认函") {
          this.allContract[ele.fileName.match(reg).join("")].push(ele);
        }
        if (ele.fileName.match(reg).join("") === "贷前调查确认函") {
          this.dqdcEnter[ele.fileName.match(reg).join("")].push(ele);
        }
      });
      this.agreementActive = Object.keys(this.contractType)[0];
      this.otherActive = Object.keys(this.dqdcType)[0];
      this.disposeResearch(list);
    },
    disposeResearch(list) {
      const imgCheck = {
        RESEARCH: "贷前调查",
        RESEARCHOTHER: "其他"
      };
      let type = Object.prototype.toString.call(list);
      if (type === "[object Object]") return;
      let keys = Object.keys(imgCheck);
      let filterImg = list.filter(ele => keys.includes(ele.imgType));
      if (filterImg.length === 0) return;
      filterImg.forEach(v => {
        v.urls.forEach(ele => {
          this.dqdcEnter[imgCheck[v.imgType]] = [];
          this.dqdcType[imgCheck[v.imgType]] = imgCheck[v.imgType];
        });
        v.urls.forEach(ele => {
          this.dqdcEnter[imgCheck[v.imgType]].push(ele);
        });
      });
    }
  },
  computed: {
    ...mapState({
      approvalData: state => state.approval.approvalData,
      dicts: state => state.common.dicts
    })
  }
};
</script>

<style lang="less">
@import "../../../assets/css/global.less";
.case-detatil-one {
  .case-detatil-one {
    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
      margin-bottom: 10px;
    }
  }
  .el-textarea.is-disabled .el-textarea__inner,
  .el-input.is-disabled .el-input__inner {
    color: @theme-color;
  }
  .case-title {
    font-weight: 650;
    color: #666666;
    margin: 20px 0;
    font-size: 20px;
  }
  .line-details {
    width: 100%;
    height: 1px;
    background: #666666;
    margin: 20px 0;
  }
}
</style>
